require(['/js//config.js'],()=>{
    require(['template','url','header','protect','footer','fly'],(template,url,header)=>{
        class GoodsInfo{
            constructor(){
                this.getData()
                this.gotoShopping()
                this.render().then(()=>{
                    this.bind()
                    this.buyNum()
                    this.zoom()
                    this.addToCart()
                })

                
            }
            getData(){
                const id = window.location.search.slice(1).split('&').reduce((obj,item)=>{
                    var arr = item.split('=')
                    obj[arr[0]]=arr[1]
                    return obj
                },{}).id
                this.id = Number(id)
            }
            render(){
                return new Promise(resolve=>{
                    $.get(url.rap2+'/libs/json/goodsinfo',resp=>{
                        if(resp.code===200){
                            const {list} = resp.body
                            this.list={...list,id:this.id}
                            $('#goodsBuycontent').html(template("goodsBuytemplate",{ ...this.list }))
                            $('#goodspics-content').html(template('goodspicstemplate',{...this.list}))
                            resolve()
                        }
                    })
                })
            }
            bind(){
                $('#smallPic').on('click','img',function(){
                    $('#smallPic img').removeClass('ac')
                    $(this).addClass('ac')
                    $('#bigPic img').attr('src',$(this).attr('src'))
                    $('#versionChoose div').removeClass('ac')
                    $('#versionChoose div').eq($(this).index()).addClass('ac')
                    $('#zoomPic').attr('src',$(this).attr('src'))
                })
                $('#versionChoose').on('click','div',function(){
                    $('#versionChoose div').removeClass('ac')
                    $(this).addClass('ac')
                    $('#smallPic img').removeClass('ac')
                    $('#smallPic img').eq($(this).index()).addClass('ac')
                    $('#bigPic img').attr('src',$('#smallPic img').eq($(this).index()).attr('src'))
                    $('#zoomPic').attr('src',$('#smallPic img').eq($(this).index()).attr('src'))
                })
                $('#colorChoose').on('click','div',function(){
                    
                    $("#colorChoose div").removeClass('ac')
                    $(this).addClass('ac')
                })

            }
            buyNum(){
                $('#buyNum .plus').on('click',()=>{
                    $('#buyNum i').html(parseInt($('#buyNum i').html())+1)
                })
                $('#buyNum .sub').on('click',()=>{
                    if(parseInt($('#buyNum i').html())>0){$('#buyNum i').html(parseInt($('#buyNum i').html())-1)}
                    
                    
                })
            }
            zoom(){
                $('#bigPic').on('mousemove',e=>{
                    var top = e.pageY - $('#bigPic').offset().top
                    var left = e.pageX - $('#bigPic').offset().left
                    left -= $('#zoomSpan').outerWidth() / 2
                    top -= $('#zoomSpan').outerHeight() / 2
                    if (left < 0) left = 0
                    if (top < 0) top = 0
                    if (left > $('#bigPic').innerWidth() -  $('#zoomSpan').outerWidth())
                        left = $('#bigPic').innerWidth() -  $('#zoomSpan').outerWidth()
                    if (top > $('#bigPic').innerHeight() -  $('#zoomSpan').outerHeight())
                        top = $('#bigPic').innerHeight() -  $('#zoomSpan').outerHeight()

                    $('#zoomSpan').css({ left, top })
                    $('#zoomPic').css({
                        left: -2 * left,
                        top: -2 * top
                    })
                })
            }
            addToCart(){
                $('#add-to-cart-btn').on('click',(e)=>{
                    this.fly(e)
                    let addCartNum = $('#addCartNum')
                    let cart = localStorage.getItem('cart')
                    if(cart){
                     cart = JSON.parse(cart)
                        const isExist = cart.some(item=>{
                            return item.id==this.list.id
                        })
                        if(isExist){
                            cart = cart.map(item=>{
                                if(item.id==this.list.id){
                                    item.count+=parseInt($("#addCartNum").html())
                                }
                                return item
                            })
                        }
                        else{
                            cart.push({
                                ...this.list,
                                count:parseInt($("#addCartNum").html()),
                                checked:true,
                            })
                        }
                        localStorage.setItem('cart',JSON.stringify(cart))
                    }else{
                        
                        localStorage.setItem('cart',JSON.stringify([{
                            ...this.list,
                            count:parseInt($("#addCartNum").html()),
                            checked:true,
                        }]))
                    }

                })
            }
            fly(e){
                $(`<img src="${this.list.pic1}" style="width: 50px;height: 50px;border-radius:50%">`).fly({
                    start:{
                      left: e.clientX,  //开始位置（必填）#fly元素会被设置成position: fixed
                      top: e.clientY,  //开始位置（必填）
                    },
                    end:{
                      left: $('#shopCartNum').offset().left - $(window).scrollLeft(), //结束位置（必填）
                      top: $('#shopCartNum').offset().top - $(window).scrollTop() //结束位置（必填）
                    },
                    speed: 1.1, //越大越快，默认1.2
                    vertex_Rtop: 100, //运动轨迹最高点top值，默认20
                    onEnd: function () {
                        this.destroy()
                        // 调用header里封装好的方法重新计算数量
                        header.calcCartTotal()
                    }
                  })
            }
            gotoShopping(){
                console.log($('#gotoShopping '))
                $('#gotoShopping ').on('click',()=>location.replace('/html/shopping.html'))
                
            }
        }
        new GoodsInfo()
    })
})